<template>
  <div >
    <div flex="cross:center cross:baseline" flex-wrap v-for="(el,elIndex) in classifyButtonList"
         class="buttonSetting">
      <p style="width:100px;text-align: right;">{{el.label}}</p>
      <div flex="cross:center" flex-wrap style="width: calc(100% - 200px);">
        <p class="recordText" v-for="(item,index) in el.buttonList" @click="typeChange(item)" :key="index"
           :class="{'active':item.type}">{{item.NameCN}}</p>
        <p v-if="el.buttonList.length == 0" class="recordText">暂无按钮</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetAllButton,
} from '@/api/apis/jurisdiction'
export default {
  // props:{
  // 	ButtonList: {
  // 		type: Array,
  // 		default: () => {
  // 			return []
  // 		}
  // 	},
  // }
  data(){
    return{
      // ButtonList:[],
      classifyButtonList: [],
      buttonPopedom:[],

    }
  },
  methods:{
    async GetAllButtonList(ids, checkdata) {
      this.classifyButtonList = []
      let params = {
        menuIDs: ids.join(",")
      }
      let res = await GetAllButton(params)
      if (res.code == 1) {
        let allButtonList = res.data[0]
        checkdata.forEach(el => {
          el.buttonList = []
          allButtonList.forEach(item => {
            if (el.id == item.MenuID) {
              el.buttonList.push(item)
            }
          })
        })
        this.classifyButtonList = checkdata
      }
      if(this.buttonPopedom.length > 0){
        this.classifyButtonList.forEach(item=>{
          item.buttonList.forEach(bItem=>{
            this.buttonPopedom.forEach(el=>{
              if(el == bItem.id){
                bItem.type = true
              }
            })
          })
        })
      }
    },
    typeChange(item) {
      item.type = !item.type
      this.$forceUpdate()
    },
  }
}

</script>

<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
.buttonSetting{
  margin-bottom: 5px;
  .recordText {
    border: 1px solid #fff;
    width: 80px;
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    background: #f2f2f2;
    color: #e0e0e0;
    margin:3px;
  }

  .recordText.active {
    background: $activeColor;
    color: #fff;
  }
}

</style>
